<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>15-echarts中的dataset</title>
  <style>
    #charts {
      width: 800px;
      height: 600px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div id="charts"></div>
  <script src="./js/echarts.min.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script> -->
  <script>
    // 1. 先引入echarts文件
    // 2. 初始化页面标签对象  就是使用init方法根据页面中提供的标签对象 来确定绘图区域
    const charts = echarts.init(document.getElementById('charts'));
    // 3. 根据参数来进一步绘制详细图形
    charts.setOption({
      xAxis: {
        type: 'category'
      },
      yAxis: {}, // y轴属性要写上 虽然值是空的
      tooltip: {},
      legend: {
        data: [ '增长率', '具体销量','市场占有率'],
        left:60
      },
      dataset: {
        source: [
          ['Jan', 34, 20, 'XX', 52],
          ['Feb', 28, 14, 'YY', 54],
          ['Mar', 45, 32, 'ZZ', 60],
          ['Apr', 69, 46],
          ['May', 39, 24],
          ['Jun', 43, 23],
          ['Jul', 33, 23],
          ['Aug', 23, 13],
          ['Sep', 43, 16],
          ['Oct', 33, 20],
          ['Nov', 39, 24],
          ['Dec', 22, 15]
        ]
      },
      series: [
        {
          name:'增长率',
          type: 'line',
          encode: { x: 0, y: 1 }
        },
        {
          name:'具体销量',
          type: 'bar',
          encode: { x: 0, y: 2 }
        },
        {
          name:'市场占有率',
          type: 'pie',
          center: ['65%', 80],
          radius: 70,
          encode: { itemName: 3, value: 4 }
        }
      ]
    })
  </script>
</body>
</html>